<template>
    <div>
        <Header :regist="`绑定银行卡`"></Header>
        <div class="w1200 margin marginTop30 whiteBg">
            <div class="bindCardTop"><img src="../../../assets/images/bindcard.png"></div>
            <div class="bindCardMain">
                <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" ref="formLabelAlign" :rules="rules" class="myForm">
                    <el-form-item label="真实姓名：" prop="name">
                        <el-input type="text" v-model="formLabelAlign.name"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号：" prop="id">
                        <el-input type="text" v-model="formLabelAlign.id"></el-input>
                    </el-form-item>
                    <el-form-item label="银行卡：" prop="bankCard">
                        <el-input type="text" v-model="formLabelAlign.bankCard"></el-input>
                    </el-form-item>
                    <el-form-item label="预留手机号：" prop="tel">
                        <el-input type="text" v-model="formLabelAlign.tel"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码：" prop="code">
                        <el-input type="text" v-model="formLabelAlign.code" class="code"></el-input>
                        <el-button @click.prevent="getMessCode()" class="getMessCode">获取验证码</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('formLabelAlign')" class="submitButton">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from '../../common/Head.vue'
    export default{
        components: {
            Header
        },
        data(){
            let checkId = (rule, value, callback) => {
                let reg18 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                let reg15 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/;
                if(reg15.test(value) || reg18.test(value)){
                    callback();
                }else{
                    return callback(new Error('请输入正确的身份证号'))
                }
            };
            let checkCard = (rule, value, callback) => {
                let reg = /^([1-9]{1})(\d{14}|\d{18})$/;
                if(!reg.test(value)){
                    return callback(new Error('请输入正确的银行卡号'))
                }else{
                    callback();
                }
            };
            let checkTel = (rule, value, callback) => {
                let reg = /^1(3|4|5|7|8)[0-9]\d{8}$/;
                if(!reg.test(value)){
                    return callback(new Error('请输入正确的手机号'))
                }else{
                    callback();
                }
            };
            return {
                labelPosition: 'right',
                formLabelAlign: {
                    name: '',
                    id: '',
                    bankCard: '',
                    tel: '',
                    code: ''
                },
                rules: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    id: [
                        { required: true, message: '身份证号不能为空', trigger: 'blur' },
                        { min: 15, max: 18, message: '身份证号长度为15或18位',trigger: 'blur' },
                        { validator: checkId, trigger: 'blur' }
                    ],
                    bankCard: [
                        { required: true, message: '银行卡号不能为空', trigger: 'blur' },
                        { min: 20, max: 20, message: '请输入正确的银行卡号',trigger: 'blur' },
                        { validator: checkCard, trigger: 'blur' }
                    ],
                    tel: [
                        { required: true, message: '手机号不能为空', trigger: 'blur' },
                        { min: 11, max: 11, message: '手机号长度为11位',trigger: 'blur' },
                        { validator: checkTel, trigger: 'blur' }
                    ],
                    code: [
                        { required: true, message: '验证码不能为空', trigger: 'blur' },
                        { min: 6, max: 6, message: '验证码长度为6位',trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getMessCode(){}
        }
    }
</script>

<style lang="scss" scoped>
    .bindCardTop{
        width: 100%;
        height: 66px;
    }
    .bindCardMain{
        width: 370px;
        margin: 0 auto;
        padding: 90px 0;
    }
</style>
<style lang="scss">
    .myForm{
        .el-form-item{
            margin-bottom: 20px;
            .el-form-item__label{
                color: #333;
            }
            .el-form-item__content{
                line-height: normal;
            }
            .el-input__inner{
                height: 40px;
                line-height: 40px;
                width: 250px;
                padding: 0 10px;
                color: #333;
                border: 1px solid #dfdfdf;
            }
            .code{
                width: 140px;
                display: block;
                float: left;
                .el-input__inner{
                    width: 140px;
                }
            }
            .getMessCode{
                width: 100px;
                height: 40px;
                border: 1px solid #dfdfdf;
                color: #ff6235;
                margin-left: 10px;
                padding: 0;
                &:hover,&:active,&:focus{
                    background: none;
                }
            }
            .submitButton.el-button{
                width: 250px;
                height: 40px;
                background: #ff6235;
                color: #fff;
                font-size: 16px;
                padding: 0;
            }
            .submitButton.el-button--primary{
                border: none;
            }
        }
        .el-form-item__error{
            color: #e13a3a;
            width: 100%;
            left: 105%;
            top: 15px;
            padding-left: 15px;
            padding-top: 0;
            background: url(../../../assets/images/product-triangle.png) no-repeat -338px 0;
        }
    }
</style>